<template>
  <div class="table_body">
    <div class="th_div">
      <div style="flex: 3">经营项目</div>
      <div style="text-align: right;">数量</div>
    </div>
    <div class="table_list" :style="{ top: tableTop + 'px' }">
      <div class="tr_div" v-for="(item, index) in tableData" :key="index">
        <div class="name">{{ item.name }}</div>
        <div class="num">{{ item.num }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'scroll-table',
  props: {
    title: [String]
  },
  data() {
    return {
      tableData: [{
        name: "食品许可证",
        num: 4350
      }, {
        name: "预包装食品（不含冷藏冷冻食品）销售",
        num: 380
      }, {
        name: "预包装食品（含冷藏冷冻食品）销售",
        num: 290
      }, {
        name: "热食类食品销售",
        num: 113
      }, {
        name: "其他",
        num: 33
      }, {
        name: "保健食品销售",
        num: 29
      }, {
        name: "散装食品",
        num: 12
      }, {
        name: "糕点类食品销售",
        num: 4
      }],
      tableTimer: null,
      tableTop: 0, // 列表向上移动的像素
      maxCanSee: 6, // maxCanSee代表可视范围内的最大完整数据条数
      tableLineHeight: 40 // tableLineHeight代表列表中一行的高度
    }
  },
  created() {
    // clearInterval(this.tableTimer);
    this.tableTimerFun();
  },
  methods: {
    tableTimerFun() {
      var count = 0; // 每滚动一次，count加1
      // tableList是列表的数据对象，maxCanSee代表可视范围内的最大完整数据条数
      if (this.tableData.length > this.maxCanSee) {
        this.tableTimer = setInterval(() => {
          // 如果还没滚动到最后一条数据，则列表向上移动以上的高度
          if (count < this.tableData.length - this.maxCanSee) {
            this.tableTop -= this.tableLineHeight; // tableLineHeight代表列表中一行的高度
            count++; // 每滚动一次，count加1
          } else {
            // 如果滚动到最后一条，则恢复初始状态
            count = 0;
            this.tableTop = 0;
          }
        }, 3000);
      }
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>
.table_body {
  height: 100%;
  overflow: hidden;
  position: relative;
  padding: 0 5px;
}
.table_list {
  width: 100%;
  position: relative;
  transition: all 0.5s;
}
.th_div {
  display: flex;
  width: 100%;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background: #103F7B;

  div {
    color: #fff;
    text-align: left;
    flex: 1;
    display: inline-block;
    cursor: pointer;
    font-weight: 600;
  }
}
.tr_div {
  width: 100%;
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;

  .icon_logo {
    position: relative;
    top: 16px;
    margin-right: 2px;
  }
  div {
    color: #fff;
    text-align: left;
    flex: 1;
    display: inline-block;
    cursor: pointer;
  }
  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis; // 文字超出显示省略号
    white-space: nowrap; // 不折行
    flex: 3;
  }
  .num {
    text-align: right;
  }
}
</style>